<template>
	<view>
			
			<view class="vf-tabbar-bg" :style="{'padding-bottom': btmHeight + 'px', height: tabbarHeight +'px'}">
				
				<image class="bg" v-if="bg" :src="bg" mode="aspectFill" :style="{height: tabbarHeight +'px'}"></image> 
				<view class="bg bg1" v-else :style="{height: tabbarHeight +'px'}"></view>
        
				<view class="tabbar-box">
					<view class="tabbar-list" v-for="(item, index) in tabs" :key="item.id" @click="toggle(index)">
						<text v-if="item.num" class="num">{{ item.num }}</text>
						<view class="img-box" :class="{'img-box-only' : current==index && !item.nameok || current!=index && !item.nameno}">
							<image class="tabbar-img" :class="{none: current!=index, 'tabbar-only-img': !item.nameok}" :src="item.iconimgok" mode=""></image>
							<image class="tabbar-img" :class="{none: current==index, 'tabbar-only-img': !item.nameno}" :src="item.iconimgno" mode=""></image>
						</view>
						<text class="tabbar-txt" :style="{color: current==index ? mainColor : '#666'}">{{ current == index ? item.nameok : item.nameno }}</text>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import { btmHeight, tabbarHeight } from '@/config/index.js';
	import { mapGetters } from 'vuex'
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			},
			tabs: {
				type: Array,
				default() {
					return []
				}
			},
			bg: {
				type: String,
				default: ''
			}
		}, 
		data() { 
			return { 
				current: 0,
				tabbarHeight,
				
				btmHeight,
				
				num: 0
			};
		},
		
		created() {
			this.current = this.active;
		},
		
		computed: {
			...mapGetters(['mainColor', 'tabbarHeight'])
		},
		
		methods:{
			toggle(t) {
				this.current = t;
				this.$emit('update:active', t)
			}
		}
	}
</script>

<style lang="scss" scoped>
.vf-tabbar-bg{
	width: 750rpx;
	height: $tabbar-height;
	position: fixed;
	bottom: 0;
	left: 0;
	// padding-bottom: 20rpx;
	// box-sizing: content-box;
}

.tabbar-box{
	width: 750rpx;
	height: $tabbar-height;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	@include flex-row;
	justify-content: space-between;
	align-items: flex-start;
}
.tabbar-list{
	@include flex-col;
	height: $tabbar-height;
	align-items: center;
	justify-content: center;
	width: 150rpx;
}
.list{
	width: 150rpx;
	height: $tabbar-height;
	@include flex-col;
	align-items: center;
	justify-content: center;
	padding-top: 10rpx;
	position: relative;
}
.num{
	position: absolute;
	right: 20rpx;
	top: 0;
	width: 30rpx;
	height: 30rpx;
	color: #fff;
	background-color: $main-color;
	text-align: center;
	line-height: 30rpx;
	border-radius: 50rpx;
	font-size: 22rpx;
}
.img-box{
	position: relative;
	width: $tabbar-img-height;
	height: $tabbar-img-height;
	overflow: hidden;
}
.img-box-only{
	width: $tabbar-imgs-height;
	height: $tabbar-imgs-height;
}
.tabbar-img{
	width: $tabbar-img-height;
	height: $tabbar-img-height;
	position: absolute;
	opacity: 1;
}
.tabbar-only-img{
	width: $tabbar-imgs-height;
	height: $tabbar-imgs-height;
	position: absolute;
}
.none{
	opacity: 0;
}
.tabbar-txt{
	font-size: 22rpx;
	margin-top: 4rpx;
}
.bg{
	width: 750rpx;
	height: $tabbar-height;
	position: absolute;
	top: 0;
	left: 0;
}
.bg1{
	width: 750rpx;
	height: $tabbar-height;
	// padding-bottom: 20rpx;
	// box-sizing: content-box;
	background-color: #fff;
	box-shadow: 0 0 5px #ccc;
}
</style>


